<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>MVVM & Vue</title>
  <script src="index.js"></script>
</head>
<body>
  <p>Object.defineProperty test</p>
  <p>模拟</p>

<script>
// var obj = {}
// var _name = 'zhangsan'

// Object.defineProperty(obj, 'name', {
//   get: function() {
//     console.log('get name:')
//     return _name
//   },
//   set: function(newVal) {
//     console.log('set name')
//     _name = newVal
//   }
// })

// 模拟 
// var vm = new Vue({
//   el: '#app',
//   data: {
//     name: 'zhangsan',
//     age: 20
//   }
// })

var vm = {}
var data = {
  name: 'zhangsan',
  age: 20
}
var key, value
for(key in data) {
  (function(key) {
    Object.defineProperty(vm, key, {
      get: function () {
        console.log('get:')
        return data[key]
      },
      set: function (newVal) {
        console.log('set:')
        data[key] = newVal
      }
    })
  })(key)
}
</script>
</body>
</html>